<template>
    <div>
        <el-container>
            <!--顶部-->
                <el-header>              
                    <Header></Header>
                </el-header>
                <!-- <el-divider></el-divider> -->
                <el-main>
                    <el-carousel :interval="2000" type="card" height="300px">
                        <el-carousel-item v-for="item in imgs" :key="item">
                            <el-image :src="require('../../../img/vaccin/'+item)"></el-image>
                        </el-carousel-item>
                    </el-carousel>
                </el-main>
                <el-footer>
                    <div class="footer-div">
                        <el-row>
                            <router-link to="/vaccinOrder">
                                <el-col :span=7 offset="1" class="col">
                                    <el-image :src="require('../../../img/vaccin/order.png')"></el-image>
                                    <h3>接种预约</h3>
                                </el-col>
                            </router-link>
                            <router-link to="/vaccinRecord">
                                <el-col :span=7 offset="1" class="col">
                                    <el-image :src="require('../../../img/vaccin/record.png')"></el-image>
                                    <h3>接种记录</h3>
                                </el-col>
                            </router-link>

                            <router-link to="/consult">
                                <el-col :span=7 offset="1" class="col">
                                    <el-image :src="require('../../../img/vaccin/consult.png')"></el-image>
                                    <h3>接种参考</h3>
                                </el-col>
                            </router-link>
                        </el-row>
                    </div>
                </el-footer>
        </el-container>
    </div>
</template>

<script>
import Header from '../../../components/home/Head.vue'
export default {
    data() {
        return {
            imgs:['vaccin1.jpg','vaccin2.jpg','vaccin3.jpg']
        }
    },
    components:{
        Header
    }
}
</script>

<style scoped>
    .footer-div{
        width: 800px;
        margin: 0 auto;
    }
    .col{
        border: 1px dotted green;
        padding-top: 20px;
    }

</style>